<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        #content {
            height: 100%;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div style="
        width: 300px;
        height: 300px;
        border: solid 2px #333;
        overflow: auto;
      ">
        <main style="height: 1000px; background-color:#ddd">
            <div id='content'>
                尊敬的用户，欢迎阅读本协议：
                腾讯公司依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意以
                下所有条款并完成个人资料的填写，才能保证享受到更好的腾讯客服服务。您使
                用服务的行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
                用户必须合法使用网络服务，不作非法用途，自觉维护本网站的声誉，遵守
                所有使用网络服务的网络协议、规定、程序和惯例。
                为更好的为用户服务，用户应向本网站提供真实、准
                确的个人资料，个人资料如有变更，应立即修正。如因用户
                提供的个人资料不实或不准确，给用户自身造成任何性质的损失，均由用户自行承担。
                尊重个人隐私是腾讯公司的责任，腾讯公司在未经用户授
                权时不得向第三方（腾讯公司控股或关联、运营合作单位除外）
                公开、编辑或透露用户个人资料的内容，但由于政府要求、法律政策
                需要等原因除外。在用户发送信息的过程中和本网站收到信息后，本网
                站将遵守行业通用的标准来保护用户的私人信息。但是任何通过因特网发
                送的信息或电子版本的存储方式都无法确保100%的安全性。因此，本网站会尽
                力使用商业上可接受的方式来保护用户的个人信息，但不对用户信息的安全作任何担保。
                本网站有权在必要时修改服务条例，本网站的服务条例一旦发生变动，将会在
                本网站的重要页面上提示修改内容，用户如不同意新的修改内容，须立即停止
                使用本协议约定的服务，否则视为用户完全同意并接受新的修改内容。根据
                客观情况及经营方针的变化，本网站有中断或停止服务的权利，用户对此表示理解并完全认同。
                本保密协议的解释权归腾讯公司所有。
            </div>
        </main>
    </div>
    <div><input type="checkbox" disabled /> 接受协议</div>
    <script>
        document.querySelector("div").addEventListener("scroll", function () {
            // console.log(this.scrollTop);
            // console.log(this.clientHeight);
            // console.log(this.offsetHeight);
            // console.log(this.scrollHeight);
            // console.log(this.getBoundingClientRect());
            document.querySelector("input").disabled = true;
            document.querySelector("input").checked = false;
            if (this.scrollHeight - this.scrollTop == this.clientHeight) {
                document.querySelector("input").disabled = false;
            }
        });
    </script>
</body>

</html>